<template>
  <div class="aa">
    <div>pos: {{x}}, {{y}}</div>
    <div class="m-20 bg-sky-300">123123</div>
    <div class="text-[28px]">123123</div>
    <n-alert title="Default 类型" type="default">
      Gee it's good to be back home
    </n-alert>
    <div>I'm {{ userInfo.name }}, 123 I'm {{ userInfo.age }} year old.</div>
    <NuxtWelcome />
    <ATest />
  </div>
</template>

<script setup lang="ts">
  const { x, y } = useMouse()
  const userInfo = useUserStore()

  setTimeout(() => {

    // 方式一、需要修改数据时直接修改
    userInfo.name = '辣鸡' + Date.now().toString()
    // 方式二、如果需要修改多个，可以使用pinia的$patch方法，推荐使用
    // count1.$patch({
    //   name: Date.now().toString()
    // })
    // 方式三、对于复杂的方法可以封装actions的函数
    // count1.$patch((state)=>{}
    //   state.name = Date.now().toString()
    // )
    // 方式四、对于复杂的方法可以封装actions的函数
    // count1.addCounter

    // console.log(userInfo)
    // console.log(setName)
    // userInfo.setName(Date.now().toString())
  }, 5000)
</script>